import React, { forwardRef, HTMLAttributes } from 'react';
import classNames from 'classnames';
import { useDispatch } from 'react-redux';
import { selectCommand } from '@/actions'
import type { MenuProps } from 'antd';
import { Dropdown, Modal } from 'antd';
import type { UniqueIdentifier } from '@dnd-kit/core';
import Action from '../Action'
import Handle from '../Handle'
import styles from './TreeItem.module.less';

const collapseIcon = (
  <svg width="10" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 70 41">
    <path d="M30.76 39.2402C31.885 40.3638 33.41 40.995 35 40.995C36.59 40.995 38.115 40.3638 39.24 39.2402L68.24 10.2402C69.2998 9.10284 69.8768 7.59846 69.8494 6.04406C69.822 4.48965 69.1923 3.00657 68.093 1.90726C66.9937 0.807959 65.5106 0.178263 63.9562 0.150837C62.4018 0.123411 60.8974 0.700397 59.76 1.76024L35 26.5102L10.24 1.76024C9.10259 0.700397 7.59822 0.123411 6.04381 0.150837C4.4894 0.178263 3.00632 0.807959 1.90702 1.90726C0.807714 3.00657 0.178019 4.48965 0.150593 6.04406C0.123167 7.59846 0.700153 9.10284 1.75999 10.2402L30.76 39.2402Z" />
  </svg>
);

const items: MenuProps['items'] = [
  {
    label: '删除',
    key: 'delete',
  },
  {
    label: '运行此步',
    key: 'runOneStep',
  },
  {
    label: '从此步执行',
    key: 'runFromStep',
  },
];

export interface Props extends Omit<HTMLAttributes<HTMLLIElement>, 'id'> {
  id: UniqueIdentifier;
  childCount?: number;
  clone?: boolean;
  collapsed?: boolean;
  depth: number;
  disableInteraction?: boolean;
  disableSelection?: boolean;
  ghost?: boolean;
  handleProps?: any;
  indicator?: boolean;
  indentationWidth: number;
  cmd: string;
  target: string;
  value: string;
  description?: string;
  seq: number;
  targetOptions?: string[];
  onCollapse?(): void;
  onBreakPoint?(): void;
  onRemove?(): void;
  wrapperRef?(node: HTMLLIElement): void;
  breakpointCommand: boolean;
  doneCommand: boolean;
  warningCommand: boolean;
  errorCommand: boolean;
  runningCommand: boolean;
  commentCommand: boolean;
  selectedCommand: boolean;
  parentId?: string;
}

const TreeItem = forwardRef<HTMLDivElement, Props>(
  (
    {
      id,
      childCount,
      clone,
      depth,
      disableSelection,
      disableInteraction,
      ghost,
      handleProps,
      indentationWidth,
      indicator,
      collapsed,
      onCollapse,
      onRemove,
      style,
      wrapperRef,
      seq,
      onBreakPoint,
      cmd,
      target,
      value,
      description,
      targetOptions,
      breakpointCommand,
      doneCommand,
      warningCommand,
      errorCommand,
      runningCommand,
      commentCommand,
      selectedCommand,
      parentId,
      ...props
    },
    ref
  ) => {
    const dispatch = useDispatch()
    const onClickCommand = () => {
      dispatch(selectCommand(id, true) as any)
    }
    return (<Dropdown menu={{
      items, onClick: (e) => {
        if (e.key === 'delete') {
          Modal.confirm({
            title: '提示',
            content: '确认删除吗？',
            onOk: () => {
              onRemove && onRemove()
            }
          })
        }
      },
    }} trigger={['contextMenu']}
    >
      <li
        className={classNames(
          styles.Wrapper,
          clone && styles.clone,
          ghost && styles.ghost,
          indicator && styles.indicator,
          disableSelection && styles.disableSelection,
          disableInteraction && styles.disableInteraction,
        )}
        ref={wrapperRef}
        {...props}
      >
        <div
          onClick={onBreakPoint}
          className={classNames(styles.Sequence, !clone && breakpointCommand && styles.Breakpoint)}>
          {seq}
        </div>
        <div
          className={styles.TreeItemWraper}
          style={
            {
              '--spacing': `${indentationWidth * (depth + 1)}px`,
            } as React.CSSProperties
          }>
          <div className={styles.TreeItem} ref={ref} style={style}>
            {
              !clone && !collapsed && childCount! > 0 && <div className={styles.ChildLine} style={{
                height: 32 * (childCount! - 1)!
              }} />
            }
            {
              /^(do|while|forEach|times|if|elseif|else)$/.test(cmd) && <Action
                onClick={onCollapse}
                className={classNames(
                  styles.Collapse,
                  collapsed && styles.collapsed
                )}
              >
                {collapseIcon}
              </Action>
            }
            <div className={classNames(styles.Content,
              doneCommand && styles.doneCommand,
              warningCommand && styles.warningCommand,
              errorCommand && styles.errorCommand,
              runningCommand && styles.runningCommand,
              commentCommand && styles.commentCommand,
              selectedCommand && styles.selectedCommand
            )}
              onClick={onClickCommand}
            >
              <Handle {...handleProps} />
              <span className={styles.Text}>{cmd}</span>
              <span className={styles.Text}>{target}</span>
              <span className={styles.Text}>{value}</span>
              <span className={styles.Text}>{description}</span>
              {clone && childCount && childCount > 1 ? (
                <span className={styles.Count}>{childCount}</span>
              ) : null}
            </div>
          </div>
        </div>
      </li>
    </Dropdown>
    );
  }
);

export default TreeItem